/**
 * CSS Custom Properties (Variables)
 * Centralized theme configuration
 */

:root {
    /* Color Palette - Light Mode */
    --primary-rgb: 66, 133, 244;
    --primary-color: rgb(var(--primary-rgb));
    --primary-container-rgb: 210, 227, 252;
    --on-primary-container: rgb(0, 30, 80);

    --secondary-rgb: 81, 172, 190;
    --secondary-color: rgb(var(--secondary-rgb));

    --error-rgb: 179, 38, 30;
    --error-color: rgb(var(--error-rgb));
    --error-container: #ffebee;
    --on-error-container: #5f0000;

    --background-color: #ffffff;
    --surface-color: #fafafa;
    --surface-variant-rgb: 224, 226, 229;
    --outline-rgb: 121, 116, 126;

    /* Text Colors */
    --text-color: #1f1f1f;
    --text-secondary: rgba(0, 0, 0, 0.7);
    --text-disabled: rgba(0, 0, 0, 0.38);

    /* Component Colors */
    --container-bg: #f5f5f5;
    --input-bg: #ffffff;
    --input-border: rgba(var(--outline-rgb), 0.3);
    --input-focus-border: var(--primary-color);

    --button-primary-bg: var(--primary-color);
    --button-primary-text: #ffffff;
    --button-secondary-bg: rgba(var(--primary-rgb), 0.12);
    --button-secondary-text: var(--primary-color);
    --button-disabled-bg: rgba(0, 0, 0, 0.12);
    --button-disabled-text: rgba(0, 0, 0, 0.38);

    /* Chat Message Colors */
    --user-msg-bg: rgba(var(--primary-container-rgb), 0.4);
    --user-msg-text: var(--text-color);
    --assistant-msg-bg: rgba(var(--surface-variant-rgb), 0.3);
    --assistant-msg-text: var(--text-color);
    --system-msg-bg: rgba(var(--secondary-rgb), 0.08);
    --system-msg-text: var(--text-secondary);

    /* Sidebar Colors */
    --sidebar-bg: #f8f9fa;
    --sidebar-border: rgba(var(--outline-rgb), 0.2);
    --sidebar-width: 380px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

    /* Spacing */
    --content-padding: 20px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 24px;

    /* Transitions */
    --transition-speed: 0.2s;
    --transition-curve: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index Layers */
    --z-sidebar: 100;
    --z-toggle-button: 101;
    --z-modal: 200;
    --z-tooltip: 300;
}

/* Dark Mode */
html.dark-mode {
    --primary-rgb: 138, 180, 248;
    --primary-color: rgb(var(--primary-rgb));
    --primary-container-rgb: 0, 50, 120;

    --background-color: #121212;
    --surface-color: #1e1e1e;
    --surface-variant-rgb: 68, 71, 70;

    --text-color: #e3e3e3;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-disabled: rgba(255, 255, 255, 0.38);

    --container-bg: #2a2a2a;
    --input-bg: #2a2a2a;
    --input-border: rgba(255, 255, 255, 0.2);

    --user-msg-bg: rgba(var(--primary-rgb), 0.15);
    --assistant-msg-bg: rgba(var(--surface-variant-rgb), 0.4);
    --system-msg-bg: rgba(var(--secondary-rgb), 0.15);

    --sidebar-bg: #1a1a1a;
    --sidebar-border: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}
